<template>
  <div>
    <section>
      <el-steps :active="activeSection" finish-status="success" simple>
        <el-step title="创建执行规则"></el-step>
        <el-step title="创建采集规则"></el-step>
        <el-step title="创建检查和通知规则"></el-step>
      </el-steps>
    </section>
    <div style="height: 510px">
      <div style="height: 500px" class="marginT10">
        <!-- 执行规则配置 -->
        <section v-show="activeSection===0" style="width: 600px;margin: 0 auto">
          <executeRuleManageComponent v-if="activeSection===0"
                                  ref="executeRuleManageComponent"
                                  :action="'add'"
                                  :taskDTO="taskDTO"
                                  @closeUpdateExecuteDialogHandler="closeUpdateExecuteDialogHandler">
          </executeRuleManageComponent>
        </section>
        <!-- 采集规则配置 -->
        <section v-show="activeSection===1" style="width: 600px;margin: 0 auto">
          <acqRuleManageComponent v-if="activeSection===1"
                              ref="acqRuleManageComponent"
                              :action="'add'"
                              :taskDTO="taskDTO"
                              @closeUpdateAcqDialogHandler="closeUpdateAcqDialogHandler">
          </acqRuleManageComponent>
        </section>
        <!-- 检查规则和通知配置 -->
        <section v-show="activeSection===2"
                 style="height: 500px;overflow-y: scroll;overflow-x: hidden">
          <checkRuleManageComponent v-if="activeSection===2"
                                ref="checkRuleManageComponent"
                                :action="'add'"
                                :taskDTO="taskDTO"
                                @closeUpdateCheckDialogHandler="closeUpdateCheckDialogHandler">
          </checkRuleManageComponent>
        </section>
      </div>
      <div style="clear: both"></div>
      <section class="floatR">
        <el-button type="primary" size="small" v-if="activeSection>0" @click="preHandler">上一步</el-button>
        <el-button type="primary" size="small" v-if="activeSection<2" @click="nextHandler">下一步</el-button>
        <el-button type="primary" size="small" v-if="activeSection===2" @click="completedHandler">完成</el-button>
      </section>
    </div>
  </div>

</template>

<script>
  import {addExecuteTask} from '@/api/rule/index'
  import executeRuleManageComponent from '@/components/rule/executeRuleManageComponent.vue'
  import acqRuleManageComponent from '@/components/rule/acqRuleManageComponent.vue'
  import checkRuleManageComponent from '@/components/rule/checkRuleManageComponent.vue'

  export default {
    data() {
      return {
        executeRuleId: null,
        activeSection: 0,
        taskDTO: {
          executeRuleDTO: null,
          acquisitionRuleDTO: null,
          checkRuleDTOList: []
        }
      }
    },
    methods: {
      init() {
      },
      // 上一步
      preHandler() {
        if (this.activeSection > 0) {
          this.activeSection--;
        }
      },
      // 下一步
      nextHandler() {
        switch (this.activeSection) {
          case 0: {
            let result = this.$refs.executeRuleManageComponent.completedHandler();
            console.log(this.taskDTO)
            if (!result) {
              return;
            }
          }
            break;
          case 1: {
            let result = this.$refs.acqRuleManageComponent.completedHandler();
            console.log(this.taskDTO)
            if (!result) {
              return;
            }
          }
            break;
        }
        if (this.activeSection < 3) {
          this.activeSection++;
        }
      },
      // 关闭执行规则回调事件
      closeUpdateExecuteDialogHandler() {
        this.$emit("closeAddDialogHandler");
      },
      // 关闭采集规则回调事件
      closeUpdateAcqDialogHandler() {
        this.$emit("closeAddDialogHandler");
      },
      // 关闭检查规则回调事件
      closeUpdateCheckDialogHandler() {
        this.$emit("closeAddDialogHandler");
      },
      // 完成事件
      completedHandler() {
        let result = this.$refs.checkRuleManageComponent.completedHandler();
        if (result) {
          addExecuteTask(this.taskDTO).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.$emit("closeAddDialogHandler");
            }
          });
        }
      }
    },
    created() {
      this.init();
    },
    computed: {},
    components: {
      executeRuleManageComponent,
      acqRuleManageComponent,
      checkRuleManageComponent
    }
  }
</script>

<style scoped>
  .col {
    height: 40px;
  }

  .col-dialog {
    margin-top: 20px;
  }

  .col-description {
    height: 70px;
  }

  .col-textarea {
    height: 70px;
  }
</style>
